<template>
  <!-- 页面主体区域 -->
  <el-container>
    <div style="height: 100vh">
      <!-- 侧边栏 -->
      <el-aside :width="isCollapse ? '50px' : '170px'" style="margin-left: -20px; height: 115%">
        <!-- 侧边栏菜单区域 -->
        <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" unique-opened
          :collapse="isCollapse" :collapse-transition="false" router :default-active="activePath"
          style="text-align: center;">
          <div class="toggle-button" @click="changeCollapse">{{ isCollapse ? '》' : '《' }}</div>
          <!-- 一级菜单 -->
          <el-menu-item :index="item.path" v-for="item in noChildren" :key="item.pid">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>{{ item.menu }}</span>
            </template>
          </el-menu-item>
          <el-submenu v-for="item in hasChildren" :key="item.pid" :index="item.pid" >
            <template slot="title">
              <span>{{ item.menu }}</span>
            </template>
              <el-menu-item v-for="child in item.children" :key="child.pid" :index="child.path" router>
                <template slot="title">
                  <!-- <i class="el-icon-location"></i> -->
                  <span>{{ child.menu }}</span>
                </template>
              </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
    </div>
    <!-- 右侧内容主体 -->
    <el-main style="height: 100%;">
      <!-- 路由占位符 -->
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      menulist: [
        {
          "pid": "1",
          "path": "/personalInformation",
          "menu": "个人信息"
        },
        {
          "pid": "2",
          "path": "/favorites",
          "menu": "收藏夹"
        },
      ],
      activePath: '',
      isCollapse: false
    }
  },
  methods: {
    getRole() {
      if (sessionStorage.getItem('role') == "管理员用户") {
        this.menulist.push({
          "pid": "3",
          "path": "/userManage",
          "menu": "用户信息管理"
        },
          {
            "pid": "4",
            "path": "/consultManage",
            "menu": "疫情资讯管理"
          },

          {
            "pid": "5",
            "path": "/notificationManage",
            "menu": "疫情通知管理"
          },

          {
            "pid": "6",
            "path": "/knowledgeManage",
            "menu": "疫情知识管理"
          },

          {
            "pid": "8",
            "path": "/applicationManage",
            "menu": "审批申请管理"
          },

          {
            "pid": "9",
            // "path": "/clockManage",
            "menu": "健康信息管理",
            "children": [
              {
                "pid": "91",
                "path": "/clockManageToday",
                "menu": "当日健康信息"
              },
              {
                "pid": "92",
                "path": "/clockManageTotal",
                "menu": "健康信息汇总"
              }
            ]
          })
      }
      else if (sessionStorage.getItem('role') == "教师用户") {
        this.menulist.push({
          "pid": "8",
          "path": "/applicationManage",
          "menu": "请假审批管理"
        })
      }
      else {
        this.menulist.push(
          {
            "pid": "7",
            "path": "/application",
            "menu": "请假申请提交"
          },)
      }
    },

    changeCollapse() {
      this.isCollapse = !this.isCollapse
    }
  },
  computed: {
    noChildren() {
      return this.menulist.filter(item => !item.children)
    },
    hasChildren() {
      console.log("file: PersonalCenter.vue:137  this.menulist.filter(item => !item.children)", this.menulist.filter(item => item.children))
      return this.menulist.filter(item => item.children)
    },
    // isCollapse() {
    //   return this.$store.state.tab.isCollapse
    // }
  },
  created() {
    this.getRole()
  }
}
</script>

<style scoped>
.el-main {
  height: 100%;
}

.el-aside {
  height: 100%;
}

.el-menu {
  height: 100%;
}
</style>